---
type: tutorial
title: Añadir un feed RSS
i18nReady: true
description: >-
  Tutorial: Crea tu primer blog con Astro —
  Instala el paquete oficial de Astro para crear un feed al que tus lectores puedan
  suscribirse
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';


<PreCheck>
  - Instalar un paquete de Astro para crear un feed RSS para tu sitio web
  - Crear un feed que pueda ser suscrito y leído por lectores de RSS.
</PreCheck>

## Instala el paquete RSS de Astro

Astro ofrece un paquete personalizado para agregar rápidamente un feed RSS a tu sitio web.

Este paquete oficial genera un documento no HTML con información sobre todas las entradas de tu blog que puede ser leído por **lectores de feeds** como Feedly, The Old Reader, y más. Este documento se actualiza cada vez que se reconstruye tu sitio.

Las personas pueden suscribirse a tu feed en un lector de feeds y recibir una notificación cuando publiques una nueva entrada en tu sitio, lo que lo convierte en una función muy popular de los blogs.

<Steps>
1. Sal del servidor de desarrollo de Astro y ejecuta el siguiente comando en el terminal para instalar el paquete RSS de Astro.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. Reinicia el servidor de desarrollo para empezar a trabajar de nuevo en tu proyecto de Astro.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## Crea un documento de feed `.xml`

<Steps>
1. Crea un nuevo fichero en `src/pages/` llamado `rss.xml.js`.

2. Copia el siguiente código en este nuevo documento. Personaliza las propiedades `title` y `description` y si es necesario, especifica un idioma diferente en `customData`:

    ```js title="src/pages/rss.xml.js"

    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Alumno de Astro | Blog',
        description: 'Mi viaje de aprendizaje de Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>en-us</language>`,
      });
    }
    ```

3. Agrega la propiedad  `site` al archivo de configuración de Astro con el URL único de tu sitio Netlify. 

   ```js title="astro.config.mjs" ins={4}
   import { defineConfig } from "astro/config";

   export default defineConfig({
     site: "https://example.com"
   });
   ```
   
4. Este documento `rss.xml` sólo se crea cuando se construye tu sitio web, por lo que no podrás ver esta página en tu navegador durante el desarrollo. Cierra el servidor de desarrollo y ejecuta los siguientes comandos para, en primer lugar, construir tu sitio localmente y, a continuación, ver una vista previa de tu construcción:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run build

      npm run preview
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run build

      pnpm run preview
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run build

      yarn run preview
      ```
      </Fragment>
    </PackageManagerTabs>

5. Visita `http://localhost:4321/rss.xml` y comprueba que puedes ver texto (sin formato) en la página con un `item` para cada uno de tus archivos `.md`. Cada elemento debe contener información sobre la entrada del blog, como `title`, `url` y `description`.

    :::tip[Ver tu feed RSS en un lector]
    Descarga un lector de feeds, o regístrate en un servicio de lector de feeds online y suscríbete a tu sitio añadiendo tu propia URL de Netlify. También puedes compartir este enlace con otras personas para que puedan suscribirse a tus entradas y recibir una notificación cuando se publique una nueva.
    :::

6. Asegúrate de salir de la vista previa y reiniciar el servidor de desarrollo cuando desees volver a ver tu sitio en modo de desarrollo.
</Steps>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo instalar un paquete de Astro utilizando la línea de comandos.
- [ ] Puedo crear un feed RSS para mi sitio web.
</Checklist>
</Box>

### Recursos

- [Generación de elementos RSS en Astro](/es/recipes/rss/#using-glob-imports)
